<template>
  <div class="main-page-wrapper">
      <div class="main-container">
          <div class="circle-container">
              <div class="circle-title">
                <span>圈子管理</span>
              </div>
                <div class="circle-main">
                    <div class="circle-left">
                        <circle-table/>
                        <p style="padding-left:5px;">
                             
                        </p>
                    </div>
                    <div id = "circleRight" class="circle-right">
                        <circle-detail/>
                    </div>
                    <circle-add/>
                </div>
          </div>
      </div>
  </div>
</template>
<script>
import CircleTable from './CircleTable'
import CircleDetail from './CircleDetail.vue'
import CircleAdd from './CircleAdd'
import axios from 'axios';

export default {
   components: {
       CircleTable,
       CircleDetail,
       CircleAdd
   },
   methods:{
       addCircle(){
           this.$store.state.circleStore.showCircleAddDialog = true;
         //  this.$store.state.circleStore.circleEditData.name = '';
          // this.$store.state.circleStore.circleEditData.introduce = '';
       }
   },
   mounted() {
       
    //    注册滚动监听事件
    var _this = this;
     document.getElementById('circleContent').onscroll = function(){
         var contentHeight =  document.getElementById('circleContent').scrollHeight;
         var scrollHeight = document.getElementById('circleContent').scrollTop;
         var viewHeight = document.getElementById('circleRight').offsetHeight;
        //  console.log(scrollHeight+","+viewHeight+"："+contentHeight)
         if(scrollHeight+viewHeight >= contentHeight){
            _this.$store.dispatch('addCircleMoment');
         }
     }
   }
}
</script>
<style scoped>
    .circle-container{
        height: 100%;
        border: 1px solid #ddd;
        border-radius:5px;
        position: relative;
    }
    .circle-title{
        height: 60px;
        background-color: #dddddd;
    }
    .circle-title span{
        margin-left: 20px;
         text-align: left;
        line-height: 60px;
    }
    .circle-main{
        display: flex;
        position: absolute;
        width: 100%;
        top:60px;
        left:0;
        bottom:0;
    }
    .circle-left{
        width:60%;
    }
    .circle-right{
        width: 40%;
    }
    .circle-left .el-pagination{
        float: right;
    }
</style>
